<script type="text/javascript">
    function doc_kindeditor_dialog_onload($dialog) {
        $dialog.find('pre').addClass('brush: html')
        SyntaxHighlighter.highlight()
    }
</script>
<div class="bjui-pageContent">
    <div class="pageFormContent" data-layout-h="0">
        <div class="bjui-doc">
            <h3 class="page-header">第三方插件：Kindeditor —— html编辑器</h3>
            <blockquote>
                <p>本节主要介绍在线HTML编辑器 - Kindeditor，插件地址：<a href="http://kindeditor.net/" target="_blank">http://kindeditor.net/</a>。</p>
            </blockquote>
            <h4>初始化</h4>
            <ul>
                <li>Data属性：textarea添加属性<code>data-toggle="kindeditor"</code>后即可触发。<br>
                    <br><span class="label label-default">DOM示例：</span>　<a href="doc/form/myeditor.html" data-toggle="dialog" data-id="myeditor" data-title="我的Kindeditor页面" data-width="800" data-height="400">打开测试页面</a><br>
                    <p>示例代码：</p>
                    <pre class="brush: html">
                        &lt;textarea data-toggle="kindeditor" data-items="fontname, fontsize, |, forecolor, hilitecolor, bold, italic, underline, removeformat, |, justifyleft, justifycenter, justifyright, insertorderedlist, insertunorderedlist, |, emoticons, image, link">&lt;/textarea>
                    </pre>
                </li>
                <li>jQuery API：<a href="http://kindeditor.net/docs/index.html" target="_blank">http://kindeditor.net/docs/index.html</a></li>
            </ul>
            <h4>参数（options）<code>basePath</code><small>为kindeditor插件目录</small></h4>
            <table class="table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>类型</th>
                        <th>默认值</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>pasteType</td>
                        <td>int</td>
                        <td>2</td>
                        <td>[可选] 粘贴类型，0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴。</td>
                    </tr>
                    <tr>
                        <td>minHeight</td>
                        <td>int</td>
                        <td>260</td>
                        <td>[可选] 编辑器的高度。</td>
                    </tr>
                    <tr>
                        <td>autoHeightMode</td>
                        <td>boolean</td>
                        <td>false</td>
                        <td>[可选] 编辑器是否可以自动调整高度。</td>
                    </tr>
                    <tr>
                        <td>items</td>
                        <td>string</td>
                        <td>
                            <a href="javascript:;" data-toggle="dialog" data-target="#doc-kindeditor-items" data-id="dialog-doc-items" data-width="800" data-height="320" data-on-load="doc_kindeditor_dialog_onload" data-title="默认items">点我查看</a>
                            <span id="doc-kindeditor-items" class="hide">
                                <p>默认items：</p>
                                <pre>
                                [
                                    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                                    'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                                    'anchor', 'link', 'unlink', '|', 'about'
                                ]
                                </pre>
                                <p>本框架配置 items 的写法：</p>
                                <pre>
                                    data-items="'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template'"
                                </pre>
                                <p><code>或</code></p>
                                <pre>
                                    data-items="source, |, undo, redo, |, preview, print, template"
                                </pre>
                            </span>
                        </td>
                        <td>[可选] 编辑器的工具栏显示图标，多个图标名称以<code>,</code>分隔，全部工具见：<a href="http://kindeditor.net/docs/option.html#items" target="_blank">http://kindeditor.net/docs/option.html#items</a>。</td>
                    </tr>
                    <tr>
                        <td>uploadJson</td>
                        <td>string</td>
                        <td>basePath + 'php/upload_json.php'</td>
                        <td>[可选] 编辑器上传文件的服务器端程序。</td>
                    </tr>
                    <tr>
                        <td>fileManagerJson</td>
                        <td>string</td>
                        <td>basePath + 'php/file_manager_json.php'</td>
                        <td>[可选] 指定浏览远程图片的服务器端程序。</td>
                    </tr>
                    <tr>
                        <td>allowFileManager</td>
                        <td>boolean</td>
                        <td>true</td>
                        <td>[可选] 上传时是否显示浏览远程服务器按钮。</td>
                    </tr>
                    <tr>
                        <td>fillDescAfterUploadImage</td>
                        <td>boolean</td>
                        <td>true</td>
                        <td>[可选] 上传图片成功后，为true则转到属性页，false则直接插入图片。</td>
                    </tr>
                    <tr>
                        <td>afterUpload</td>
                        <td>function(url)</td>
                        <td>null</td>
                        <td>[可选] 上传文件后执行的回调函数。</td>
                    </tr>
                    <tr>
                        <td>afterSelectFile</td>
                        <td>function(url)</td>
                        <td>null</td>
                        <td>[可选] 从图片空间选择文件后执行的回调函数。</td>
                    </tr>
                    <tr>
                        <td>confirmSelect</td>
                        <td>function(url)</td>
                        <td>null</td>
                        <td>[可选] <code>自定义</code>用于上传(fillDescAfterUploadImage=true时生效)或选择图片并插入成功后的回调函数。</td>
                    </tr>
                    <tr>
                        <td>htmlTags</td>
                        <td>object</td>
                        <td><a href="javascript:;" data-toggle="dialog" data-target="#doc-kindeditor-htmltags" data-id="dialog-doc-htmltags" data-width="700" data-height="320" data-on-load="doc_kindeditor_dialog_onload" data-title="默认htmlTags">点我查看</a>
                            <span id="doc-kindeditor-htmltags" class="hide">
                                <pre>
                                    {
                                        font : [],
                                        span : ['.color', '.background-color', '.font-size', '.font-family'],
                                        div : ['.margin', '.padding', '.text-align'],
                                        table: ['align', 'width'],
                                        'td,th': ['align', 'valign', 'width', 'height', 'colspan', 'rowspan'],
                                        a : ['href', 'target', 'name'],
                                        embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
                                        img : ['src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'],
                                        'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [
                                            'class', 'align', '.text-align', '.color', '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
                                        ],
                                        pre : ['class'],
                                        hr : ['class', '.page-break-after'],
                                        'br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del' : []
                                        
                                    }
                                </pre>
                            </span>
                        </td>
                        <td>[可选] 指定要保留的HTML标记和属性，官方版见：<a href="http://kindeditor.net/docs/option.html#htmltags" target="_blank">http://kindeditor.net/docs/option.html#htmltags</a>。</td>
                    </tr>
                </tbody>
            </table>
            <p>配置更多参数请查看Kindeditor官方文档：<a href="http://kindeditor.net/docs/index.html" target="_blank">http://kindeditor.net/docs/index.html</a>，本框架引入Kindeditor插件入口在<code>bjui-plugins.js</code></p>
        </div>
    </div>
    <div class="bjui-footBar">
        <ul>
            <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
        </ul>
    </div>
</div>